<template>
  <div class="app-container">
    <div v-if="userStore.user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <UserCard :user="userStore.user" />
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="登录日志" name="activity">
                <LoginLog />
              </el-tab-pane>
              <el-tab-pane label="操作日志" name="timeline">
                <OperateLog />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import UserCard from "./components/UserCard.vue";
import LoginLog from "./components/LoginLog.vue";
import OperateLog from "./components/OperateLog.vue";

defineOptions({
  name: "profile",
  inheritAttrs: false,
});
const activeTab = ref("activity");
const userStore = ref(useUserStore());
</script>
